<template>
  <el-pagination v-model:current-page="currentPage"
                 v-model:page-size="pageSize"
                 :page-sizes="[15, 30, 60, 90]"
                 :small="small"
                 :disabled="disabled"
                 :background="background"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange" />
</template>
<script setup>
import { ref } from 'vue';
// 每页条数
const currentPage = ref(4);
// 当前页数
const pageSize = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  pageSize.value = val;
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
};
</script>
